<template>
  <div>
    <el-dialog
      title="设置接警人"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeEditDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form :model="alarmReceiveInfo" ref="refSetInfo" label-width="100px">
        <el-form-item
          size="small"
          label="一级接警人"
          prop="alarmReceiverIdList1"
        >
          <el-select
            v-model="alarmReceiveInfo.alarmReceiverIdList1"
            multiple
            :multiple-limit="6"
            placeholder="请选择"
            style="width: 100%"
            filterable
            @change="change1"
          >
            <el-option
              v-for="item in dataList"
              :key="item.id"
              :label="item.name + '：' + item.mobile"
              :value="item.id"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          size="small"
          label="二级接警人"
          prop="alarmReceiverIdList2"
        >
          <el-select
            v-model="alarmReceiveInfo.alarmReceiverIdList2"
            multiple
            :multiple-limit="6"
            placeholder="请选择"
            style="width: 100%"
            filterable
            @change="change1"
          >
            <el-option
              v-for="item in dataList"
              :key="item.id"
              :label="item.name + '：' + item.mobile"
              :value="item.id"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          size="small"
          label="三级接警人"
          prop="alarmReceiverIdList3"
        >
          <el-select
            v-model="alarmReceiveInfo.alarmReceiverIdList3"
            multiple
            :multiple-limit="6"
            placeholder="请选择"
            style="width: 100%"
            filterable
            @change="change1"
          >
            <el-option
              v-for="item in dataList"
              :key="item.id"
              :label="item.name + '：' + item.mobile"
              :value="item.id"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          size="small"
          label="四级接警人"
          prop="alarmReceiverIdList4"
        >
          <el-select
            v-model="alarmReceiveInfo.alarmReceiverIdList4"
            multiple
            :multiple-limit="6"
            placeholder="请选择"
            style="width: 100%"
            filterable
            @change="change1"
          >
            <el-option
              v-for="item in dataList"
              :key="item.id"
              :label="item.name + '：' + item.mobile"
              :value="item.id"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="addClick"
        >
          新增
        </el-button>
        <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
        <el-button
          size="small"
          @click="editSubmit"
          v-preventReClick="1000" class="confirm-button"
          >确 定</el-button
        >
      </span>

      <AlarmReceiverAdd
        ref="refAlarmReceiverAdd"
        @getDataList="getDataList2"
      ></AlarmReceiverAdd>
    </el-dialog>
  </div>
</template>
  
<script>
import {
  reqAddBatchReceiver,
  reqAlarmReceiverList,
  reqGetByTargetId,
  reqAddReceiver,
} from "@/api/api";
import { mapState } from "vuex";
import AlarmReceiverAdd from "./AlarmReceiverAdd.vue";

export default {
  name: "add",
  components: {
    AlarmReceiverAdd,
  },
  props: ["batchDate", "orgId"],
  data() {
    return {
      dialogVisible: false,
      dataList: [],
      alarmReceiveInfo: {
        alarmReceiverIdList1: [],
        alarmReceiverIdList2: [],
        alarmReceiverIdList3: [],
        alarmReceiverIdList4: [],
      },
      spaceId: "",
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 新增
    addClick() {
      this.$refs.refAlarmReceiverAdd.dialogVisible = true;
    },
    async getDataList2(result) {
      // console.log(result);
      this.spaceId = result.id; //空间id
      const res = await reqAlarmReceiverList(1, 500, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: result.orgId,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      //   console.log(res);
      this.dataList = res.data.rows;
      this.getByTargetId();
    },
    // 获取接警人列表
    async getDataList(result) {
      console.log(result);
      this.spaceId = result.id; //空间id
      const res = await reqAlarmReceiverList(1, 500, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: result.orgId,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      //   console.log(res);
      this.dataList = res.data.rows;
      this.getByTargetId();
    },
    // 空间id获取接警人列表
    async getByTargetId() {
      this.alarmReceiveInfo = {
        alarmReceiverIdList1: [],
        alarmReceiverIdList2: [],
        alarmReceiverIdList3: [],
        alarmReceiverIdList4: [],
      };
      let res = await reqGetByTargetId(this.spaceId);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);
      res.data.rows.forEach((item) => {
        if (item.level == 1) {
          this.alarmReceiveInfo.alarmReceiverIdList1.push(item.id);
        }
        if (item.level == 2) {
          this.alarmReceiveInfo.alarmReceiverIdList2.push(item.id);
        }
        if (item.level == 3) {
          this.alarmReceiveInfo.alarmReceiverIdList3.push(item.id);
        }
        if (item.level == 4) {
          this.alarmReceiveInfo.alarmReceiverIdList4.push(item.id);
        }
      });
      this.change1();
    },
    change1(e) {
      let list = [
        ...this.alarmReceiveInfo.alarmReceiverIdList1,
        ...this.alarmReceiveInfo.alarmReceiverIdList2,
        ...this.alarmReceiveInfo.alarmReceiverIdList3,
        ...this.alarmReceiveInfo.alarmReceiverIdList4,
      ];
      // console.log(list);
      this.dataList.forEach((item) => {
        item.disabled = false;
        list.forEach((item2) => {
          if (item.id == item2) {
            item.disabled = true;
          }
        });
      });
    },
    // 点击修改
    async editSubmit() {
      const res = await reqAddReceiver({
        spaceId: this.spaceId,
        alarmReceiverIdList1: this.alarmReceiveInfo.alarmReceiverIdList1,
        alarmReceiverIdList2: this.alarmReceiveInfo.alarmReceiverIdList2,
        alarmReceiverIdList3: this.alarmReceiveInfo.alarmReceiverIdList3,
        alarmReceiverIdList4: this.alarmReceiveInfo.alarmReceiverIdList4,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("设置接警人成功");
      this.closeEditDialog();
    },
    // 点击关闭弹框
    closeEditDialog() {
      this.dialogVisible = false;
      this.alarmReceiveInfo = {
        alarmReceiverIdList1: [],
        alarmReceiverIdList2: [],
        alarmReceiverIdList3: [],
        alarmReceiverIdList4: [],
      };
    },
  },
  deactivated() {
    this.closeEditDialog();
  },
};
</script>
  
<style lang="less" scoped>
@import url("../../common.less");
</style>